<!--
=========================================================
 Material Dashboard - v2.1.1
=========================================================

 Product Page: https://www.creative-tim.com/product/material-dashboard
 Copyright 2019 Creative Tim (https://www.creative-tim.com)
 Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)

 Coded by Creative Tim

=========================================================

 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
  <div class="container">
    <span class="skiplink-text">Skip to main content</span>
  </div>
</a>
<header class="navbar navbar-expand navbar-dark bg-primary flex-column flex-md-row bd-navbar">
  <a class="navbar-brand mr-0 mr-md-2 navbar-absolute-logo" href="https://www.creative-tim.com/product/material-dashboard" target="_blank">
    材料仪表板
  </a>
  <ul class="navbar-nav flex-row d-none d-md-flex">
    <!-- <li class="nav-item">
      <a class="nav-link p-2" href="#version">
        2.1.1
      </a>
    </li> -->
    <li class="nav-item dropdown">
      <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        v2.1.1
      </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
        <a class="dropdown-item active" href="../../../../docs/2.1/getting-started/introduction.html">BS4 - 2.1.1</a>
        <a class="dropdown-item" href="../../../../docs/2.0/getting-started/introduction.html">BS4 - 2.1.0</a>
        <a class="dropdown-item" href="https://demos.creative-tim.com/bs3/material-dashboard/documentation/tutorial-components.html" target="_blank">BS3 - 1.0</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link p-2" href="https://github.com/creativetimofficial/material-dashboard" target="_blank" rel="noopener" aria-label="GitHub">
        <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
          <title>GitHub</title>
          <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd" />
        </svg>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link p-2" href="https://twitter.com/CreativeTim" target="_blank" rel="noopener" aria-label="Twitter">
        <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false">
          <title>Twitter</title>
          <path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor" />
        </svg>
      </a>
    </li>
  </ul>
  <div class="navbar-nav-scroll ml-md-auto ">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item">
        <a class="nav-link" href="https://www.creative-tim.com/product/material-dashboard"> <i class="material-icons">card_membership</i> 升级到专业版 </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://demos.creative-tim.com/material-dashboard/examples/dashboard.html"><i class="material-icons">view_carousel</i> 实时预览</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://github.com/creativetimofficial/material-dashboard" target="_blank" rel="noopener"><i class="material-icons">star</i>
          帮助明星
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-item nav-link dropdown-toggle mr-md-2" href="introduction.html#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded=" ">
          <i class="material-icons">translate </i>
          中文
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
          <a class="dropdown-item active  dropdown-flag-holder" href="#">
            中文
          </a>
          <a class="dropdown-item dropdown-flag-holder" href="../../../../docs/2.1/getting-started/introduction.html">ENGLISH
          </a>
          <a class="dropdown-item dropdown-flag-holder" href="../../../../ja/docs/2.1/getting-started/introduction.html">日本人
          </a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="" target="_blank" rel="noopener"></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="" target="_blank" rel="noopener"></a>
      </li>
    </ul>
  </div>
  <a href="https://github.com/creativetimofficial/material-dashboard" class="github-corner" aria-label="View source on Github">
    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#9c27b0; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
      <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
      <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
    </svg></a>
  <style>
    .github-corner:hover .octo-arm {
      animation: octocat-wave 560ms ease-in-out
    }

    @keyframes octocat-wave {

      0%,
      100% {
        transform: rotate(0)
      }

      20%,
      60% {
        transform: rotate(-25deg)
      }

      40%,
      80% {
        transform: rotate(10deg)
      }
    }

    @media (max-width:500px) {
      .github-corner:hover .octo-arm {
        animation: none
      }

      .github-corner .octo-arm {
        animation: octocat-wave 560ms ease-in-out
      }
    }
  </style>
</header>
<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <nav class="collapse bd-links" id="bd-docs-nav">
        <div class="bd-toc-item active">
          <a class="bd-toc-link" href="#docs">
            入门
          </a>
          <ul class="nav bd-sidenav">
            <li class="">
              <a href="../../../../zh/docs/2.1/getting-started/introduction.html">
                介绍
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/getting-started/license.html">
                执照
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/getting-started/file-structure.html">
                文件结构
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/getting-started/build-tools.html">
                构建工具
              </a>
            </li>
          </ul>
        </div>
        <div class="bd-toc-item active">
          <a class="bd-toc-link" href="#docs">
            组件
          </a>
          <ul class="nav bd-sidenav">
            <li class="">
              <a href="../../../../zh/docs/2.1/components/alerts.html">
                警报
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/badge.html">
                徽章
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/breadcrumb.html">
                面包屑
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/buttons.html">
                纽扣
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/card.html">
                卡
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/carousel.html">
                圆盘传送带
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/collapse.html">
                坍方
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/dropdowns.html">
                下拉菜单
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/forms.html">
                形式
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/google-maps.html">
                谷歌地图
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/info-areas.html">
                信息区域
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/material-icons.html">
                材料图标
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/modal.html">
                语气
              </a>
            </li>
            <li class="active bd-sidenav-active">
              <a href="../../../../zh/docs/2.1/components/navs.html">
                资产净值
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/navbar.html">
                导航栏
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/pagination.html">
                分页
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/parallax.html">
                视差
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/popovers.html">
                约夏克布丁
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/progress.html">
                进展
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/tables.html">
                表
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/tooltips.html">
                提示
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/typography.html">
                活版印刷
              </a>
            </li>
          </ul>
        </div>
        <div class="bd-toc-item active">
          <a class="bd-toc-link" href="#docs">
            插件
          </a>
          <ul class="nav bd-sidenav">
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/bootstrap-notify.html">
                Bootstrap通知
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/perfect-scrollbar.html">
                完美的滚动条
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/bootstrap-switch.html">
                自举开关
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/datetimepicker.html">
                的DateTimePicker
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/fullcalendar.html">
                完整日历
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/jvector-map.html">
                jVector地图
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/sweet-alert-2.html">
                甜蜜警报
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/jquery-validation.html">
                JQuery 验证
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/fileupload-jasny.html">
                上传文件 Jasny
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/jquery-tagsinput.html">
                jQuery Tagsinput
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/select-bootstrap.html">
                选择Bootstrap
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/sliders.html">
                滑块
                <span class="badge badge-primary">临</span>
              </a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
    <div class="d-none d-xl-block col-xl-2 bd-toc">
      <ul class="section-nav">
        <li class="toc-entry toc-h2"><a href="#基本导航">基本导航</a></li>
        <li class="toc-entry toc-h2"><a href="#可用样式">可用样式</a>
          <ul>
            <li class="toc-entry toc-h3"><a href="#水平对齐">水平对齐</a></li>
            <li class="toc-entry toc-h3"><a href="#垂直">垂直</a></li>
            <li class="toc-entry toc-h3"><a href="#标签">标签</a>
              <ul>
                <li class="toc-entry toc-h4"><a href="#普通卡上的标签">普通卡上的标签</a></li>
                <li class="toc-entry toc-h4"><a href="#选项卡上的图标">选项卡上的图标</a></li>
              </ul>
            </li>
            <li class="toc-entry toc-h3"><a href="#丸">丸</a>
              <ul>
                <li class="toc-entry toc-h4"><a href="#水平标签">水平标签</a></li>
                <li class="toc-entry toc-h4"><a href="#垂直标签">垂直标签</a></li>
                <li class="toc-entry toc-h4"><a href="#用图标">用图标</a></li>
              </ul>
            </li>
            <li class="toc-entry toc-h3"><a href="#丸与下拉菜单">丸与下拉菜单</a></li>
            <li class="toc-entry toc-h3"><a href="#使用数据属性">使用数据属性</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
      <div class="row mt-4">
        <a class="btn btn-default btn-sm ml-auto" href="https://github.com/creativetimofficial/material-dashboard-docs/edit/master/zh/docs/2.1/components/navs.html" target="_blank">编辑于 Github</a>
      </div>
      <h1 class="bd-title" id="content">
        资产净值
      </h1>
      <p class="bd-lead">有关如何使用Bootstrap包含的导航组件的文档和示例。</p>
      <h2 id="基本导航">基本导航</h2>
      <p>Bootstrap中可用的导航共享通用标记和样式，从基础<code class="highlighter-rouge">.nav</code>类到活动和禁用状态。交换修饰符类以在每种样式之间切换。</p>
      <p>基础<code class="highlighter-rouge">.nav</code>组件使用flexbox构建，为构建所有类型的导航组件提供了坚实的基础。它包括一些样式覆盖（用于处理列表），一些用于较大命中区域的链接填充和基本禁用样式。</p>
      <div class="bd-callout bd-callout-info">
        <p>基础<code class="highlighter-rouge">.nav</code>组件不包含任何<code class="highlighter-rouge">.active</code>状态。以下示例包括该类，主要用于演示此特定类不会触发任何特殊样式。</p>
      </div>
      <div class="bd-example" data-example-id="">
        <ul class="nav">
          <li class="nav-item">
            <a class="nav-link active" href="#0">活性</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#0">链接</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#0">链接</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#0">残障人士</a>
          </li>
        </ul>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>活性<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>链接<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>链接<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>残障人士<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre>
      </div>
      <p>课程全程使用，因此您的标记可以超级灵活。 使用上面的<code class="highlighter-rouge">&lt;ul&gt;，或者用一个</code>&lt;nav&gt;<code class="highlighter-rouge">元素滚动你自己。 因为</code>.nav<code class="highlighter-rouge">使用</code>display：flex`，导航链接的行为与导航项相同，但没有额外的标记。</p>
      <div class="bd-example" data-example-id="">
        <nav class="nav">
          <a class="nav-link active" href="#0">活性</a>
          <a class="nav-link" href="#0">链接</a>
          <a class="nav-link" href="#0">链接</a>
          <a class="nav-link disabled" href="#0">残障人士</a>
        </nav>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"nav"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>活性<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>链接<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>链接<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>残障人士<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre>
      </div>
      <h2 id="可用样式">可用样式</h2>
      <p>使用修饰符和实用程序更改<code class="highlighter-rouge">.nav</code>s组件的样式。根据需要混合搭配，或建立自己的。</p>
      <h3 id="水平对齐">水平对齐</h3>
      <p>使用[flexbox utilities]（{{site.baseurl}} docs {{site.docs_version}} layout grid＃horizo​​ntal-alignment）更改导航的水平对齐方式。默认情况下，导航是左对齐的，但您可以轻松地将它们更改为居中或右对齐。与往常一样，垂直导航也可以在没有“&lt;ul&gt;”的情况下进行。</p>
      <p>以<code class="highlighter-rouge">.justify-content-center</code>为中心:</p>
      <div class="bd-example" data-example-id="">
        <ul class="nav justify-content-center">
          <li class="nav-item">
            <a class="nav-link active" href="#0">活性</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#0">链接</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#0">链接</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#0">残障人士</a>
          </li>
        </ul>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav justify-content-center"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>活性<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>链接<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>链接<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>残障人士<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre>
      </div>
      <p>Right-aligned with <code class="highlighter-rouge">.justify-content-end</code>:</p>
      <div class="bd-example" data-example-id="">
        <ul class="nav justify-content-end">
          <li class="nav-item">
            <a class="nav-link active" href="#0">活性</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#0">链接</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#0">链接</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#0">残障人士</a>
          </li>
        </ul>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav justify-content-end"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>活性<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>链接<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>链接<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>残障人士<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre>
      </div>
      <h3 id="垂直">垂直</h3>
      <p>通过使用<code class="highlighter-rouge">.flex-column</code>实用程序更改弹性项目方向来堆叠导航。 需要将它们堆叠在某些视口而不是其他视口上吗？ 使用响应版本（例如<code class="highlighter-rouge">.flex-sm-column</code>）。</p>
      <div class="bd-example" data-example-id="">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link active" href="#0">活性</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#0">链接</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#0">链接</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#0">残障人士</a>
          </li>
        </ul>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav flex-column"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>活性<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>链接<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>链接<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>残障人士<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre>
      </div>
      <p>与往常一样，垂直导航也可以在没有“&lt;ul&gt;”的情况下进行。</p>
      <div class="bd-example" data-example-id="">
        <nav class="nav flex-column">
          <a class="nav-link active" href="#0">活性</a>
          <a class="nav-link" href="#0">链接</a>
          <a class="nav-link" href="#0">链接</a>
          <a class="nav-link disabled" href="#0">残障人士</a>
        </nav>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"nav flex-column"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>活性<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>链接<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>链接<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>残障人士<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre>
      </div>
      <h3 id="标签">标签</h3>
      <p>从上面获取基本导航并添加<code class="highlighter-rouge">.nav-tabs</code>类以生成选项卡式界面。 使用它们通过我们的[tab JavaScript插件]（#javascript-behavior）创建可列表区域。</p>
      <h4 id="普通卡上的标签">普通卡上的标签</h4>
      <div class="bd-example" data-example-id="">
        <div class="card card-nav-tabs card-plain">
          <div class="card-header card-header-danger">
            <!-- colors: "header-primary", "header-info", "header-success", "header-warning", "header-danger" -->
            <div class="nav-tabs-navigation">
              <div class="nav-tabs-wrapper">
                <ul class="nav nav-tabs" data-tabs="tabs">
                  <li class="nav-item">
                    <a class="nav-link active" href="#home" data-toggle="tab">家</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#updates" data-toggle="tab">updates</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#history" data-toggle="tab">历史</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="card-body">
            <div class="tab-content text-center">
              <div class="tab-pane active" id="home">
                我认为这是我的责任，推动可能性，向人们展示，这是事情可以达到的水平。 因此，当你得到一个名为Kanye West的东西时，它应该是推动最远的可能性。 我将成为最终价值数十亿美元的公司的领导者，因为我得到了答案。 我理解文化。 我是核心。
              </div>
              <div class="tab-pane" id="updates">
                我将成为最终价值数十亿美元的公司的领导者，因为我得到了答案。 我理解文化。 我是核心。 我认为＆＃x2019是我的责任，推动可能性，向人们展示，这是事情可以达到的水平。 我认为＆＃x2019是我的责任，推动可能性，向人们展示，这是事情可以达到的水平。
              </div>
              <div class="tab-pane" id="history">
                我认为＆＃x2019是我的责任，推动可能性，向人们展示，这是事情可以达到的水平。 因此，当你得到一个名为Kanye West的东西时，它应该推动最远的可能性。 我将成为最终价值数十亿美元的公司的领导者，因为我得到了答案。 我理解文化。 我是核心。
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-nav-tabs card-plain"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header card-header-danger"</span><span class="nt">&gt;</span>
    <span class="c">&lt;!-- colors: "header-primary", "header-info", "header-success", "header-warning", "header-danger" --&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav-tabs-navigation"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav-tabs-wrapper"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">data-tabs=</span><span class="s">"tabs"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#home"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>家<span class="nt">&lt;/a&gt;</span>
                    <span class="nt">&lt;/li&gt;</span>
                    <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#updates"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>updates<span class="nt">&lt;/a&gt;</span>
                    <span class="nt">&lt;/li&gt;</span>
                    <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#history"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>历史<span class="nt">&lt;/a&gt;</span>
                    <span class="nt">&lt;/li&gt;</span>
                <span class="nt">&lt;/ul&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content text-center"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane active"</span> <span class="na">id=</span><span class="s">"home"</span><span class="nt">&gt;</span>
我认为这是我的责任，推动可能性，向人们展示，这是事情可以达到的水平。 因此，当你得到一个名为Kanye West的东西时，它应该是推动最远的可能性。 我将成为最终价值数十亿美元的公司的领导者，因为我得到了答案。 我理解文化。 我是核心。
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"updates"</span><span class="nt">&gt;</span>
我将成为最终价值数十亿美元的公司的领导者，因为我得到了答案。 我理解文化。 我是核心。 我认为＆＃x2019是我的责任，推动可能性，向人们展示，这是事情可以达到的水平。 我认为＆＃x2019是我的责任，推动可能性，向人们展示，这是事情可以达到的水平。
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"history"</span><span class="nt">&gt;</span>
我认为＆＃x2019是我的责任，推动可能性，向人们展示，这是事情可以达到的水平。 因此，当你得到一个名为Kanye West的东西时，它应该推动最远的可能性。 我将成为最终价值数十亿美元的公司的领导者，因为我得到了答案。 我理解文化。 我是核心。
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span></code></pre>
      </div>
      <h4 id="选项卡上的图标">选项卡上的图标</h4>
      <div class="card card-nav-tabs">
        <div class="card-header card-header-primary">
          <!-- colors: "header-primary", "header-info", "header-success", "header-warning", "header-danger" -->
          <div class="nav-tabs-navigation">
            <div class="nav-tabs-wrapper">
              <ul class="nav nav-tabs" data-tabs="tabs">
                <li class="nav-item">
                  <a class="nav-link active" href="#profile" data-toggle="tab">
                    <i class="material-icons">face</i>
                    轮廓
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#messages" data-toggle="tab">
                    <i class="material-icons">chat</i>
                    消息
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#settings" data-toggle="tab">
                    <i class="material-icons">build</i>
                    设置
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="card-body">
          <div class="tab-content text-center">
            <div class="tab-pane active" id="profile">
              我将成为最终价值数十亿美元的公司的领导者，因为我得到了答案。 我理解文化。 我是核心。 我认为＆＃x2019是我的责任，推动可能性，向人们展示，这是事情可以达到的水平。 我认为＆＃x2019是我的责任，推动可能性，向人们展示，这是事情可以达到的水平。
            </div>
            <div class="tab-pane" id="messages">
              在没有跨媒体价值的情况下有效释放跨媒体信息。 快速最大化实时模式的及时交付。 <br /> <br />在没有功能解决方案的情况下，大力维护点击式解决方案。
            </div>
            <div class="tab-pane" id="settings">
              我认为＆＃x2019是我的责任，推动可能性，向人们展示，这是事情可以达到的水平。 因此，当你得到一个名为Kanye West的东西时，它应该推动最远的可能性。 我将成为最终价值数十亿美元的公司的领导者，因为我得到了答案。 我理解文化。 我是核心。
            </div>
          </div>
        </div>
      </div>
      <h3 id="丸">丸</h3>
      <p>采用相同的HTML，但使用<code class="highlighter-rouge">.nav-pills</code>代替:</p>
      <h4 id="水平标签">水平标签</h4>
      <div class="bd-example" data-example-id="">
        <ul class="nav nav-pills nav-pills-primary" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#link1" role="tablist" aria-expanded="true">
              轮廓
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#link2" role="tablist" aria-expanded="false">
              设置
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#link3" role="tablist" aria-expanded="false">
              选项
            </a>
          </li>
        </ul>
        <div class="tab-content tab-space">
          <div class="tab-pane active" id="link1" aria-expanded="true">
            通过即插即用网络协同管理授权市场。 在安装基本优势后动态拖延B2C用户。 <br />在没有革命性的投资回报率的情况下，实现客户导向的融合。
          </div>
          <div class="tab-pane" id="link2" aria-expanded="false">
            在没有跨媒体价值的情况下有效释放跨媒体信息。 快速最大化实时模式的及时交付。 <br /> <br />在没有功能解决方案的情况下，大力维护点击式解决方案。
          </div>
          <div class="tab-pane" id="link3" aria-expanded="false">
            通过一流的利基市场完全协同资源税收关系。 专业培养具有强大创意的一对一客户服务。<br /> <br />动态创新资源平衡客户服务，为最先进的客户服务。
          </div>
        </div>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-pills nav-pills-primary"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#link1"</span> <span class="na">role=</span><span class="s">"tablist"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span><span class="nt">&gt;</span>
      轮廓
        <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#link2"</span> <span class="na">role=</span><span class="s">"tablist"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
      设置
        <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#link3"</span> <span class="na">role=</span><span class="s">"tablist"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
      选项
        <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content tab-space"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane active"</span> <span class="na">id=</span><span class="s">"link1"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span><span class="nt">&gt;</span>
通过即插即用网络协同管理授权市场。 在安装基本优势后动态拖延B2C用户。 <span class="nt">&lt;br/&gt;</span>在没有革命性的投资回报率的情况下，实现客户导向的融合。
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"link2"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
在没有跨媒体价值的情况下有效释放跨媒体信息。 快速最大化实时模式的及时交付。 <span class="nt">&lt;br&gt;</span> <span class="nt">&lt;br&gt;</span>在没有功能解决方案的情况下，大力维护点击式解决方案。
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"link3"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
      通过一流的利基市场完全协同资源税收关系。 专业培养具有强大创意的一对一客户服务。<span class="nt">&lt;br&gt;</span> <span class="nt">&lt;br&gt;</span>动态创新资源平衡客户服务，为最先进的客户服务。
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
      </div>
      <h4 id="垂直标签">垂直标签</h4>
      <div class="bd-example" data-example-id="">
        <div class="row">
          <div class="col-md-4">
            <ul class="nav nav-pills nav-pills-primary flex-column">
              <li class="nav-item"><a class="nav-link active" href="#tab1" data-toggle="tab">轮廓</a></li>
              <li class="nav-item"><a class="nav-link" href="#tab2" data-toggle="tab">设置</a></li>
              <li class="nav-item"><a class="nav-link" href="#tab3" data-toggle="tab">选项</a></li>
            </ul>
          </div>
          <div class="col-md-8">
            <div class="tab-content">
              <div class="tab-pane active" id="tab1">
                通过即插即用网络协同管理授权市场。 在安装基本优势后动态拖延B2C用户。 <br />在没有革命性的投资回报率的情况下，实现客户导向的融合。
              </div>
              <div class="tab-pane" id="tab2">
                在没有跨媒体价值的情况下有效释放跨媒体信息。 快速最大化实时模式的及时交付。 <br /> <br />在没有功能解决方案的情况下，大力维护点击式解决方案。
              </div>
              <div class="tab-pane" id="tab3">
                通过一流的利基市场完全协同资源税收关系。 专业培养具有强大创意的一对一客户服务。<br /> <br />动态创新资源平衡客户服务，为最先进的客户服务。
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-pills nav-pills-primary flex-column"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#tab1"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>轮廓<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#tab2"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>设置<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#tab3"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>选项<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;/ul&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-8"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane active"</span> <span class="na">id=</span><span class="s">"tab1"</span><span class="nt">&gt;</span>
              通过即插即用网络协同管理授权市场。 在安装基本优势后动态拖延B2C用户。 <span class="nt">&lt;br/&gt;</span>在没有革命性的投资回报率的情况下，实现客户导向的融合。
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"tab2"</span><span class="nt">&gt;</span>
              在没有跨媒体价值的情况下有效释放跨媒体信息。 快速最大化实时模式的及时交付。 <span class="nt">&lt;br&gt;</span> <span class="nt">&lt;br&gt;</span>在没有功能解决方案的情况下，大力维护点击式解决方案。
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"tab3"</span><span class="nt">&gt;</span>
              通过一流的利基市场完全协同资源税收关系。 专业培养具有强大创意的一对一客户服务。<span class="nt">&lt;br&gt;</span> <span class="nt">&lt;br&gt;</span>动态创新资源平衡客户服务，为最先进的客户服务。
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
      </div>
      <h4 id="用图标">用图标</h4>
      <div class="bd-example" data-example-id="">
        <ul class="nav nav-pills nav-pills-icons" role="tablist">
          <!--
        color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger"
    -->
          <li class="nav-item">
            <a class="nav-link" href="#dashboard-1" role="tab" data-toggle="tab">
              <i class="material-icons">dashboard</i>
              仪表板
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" href="#schedule-1" role="tab" data-toggle="tab">
              <i class="material-icons">schedule</i>
              时间表
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#tasks-1" role="tab" data-toggle="tab">
              <i class="material-icons">list</i>
              任务
            </a>
          </li>
        </ul>
        <div class="tab-content tab-space">
          <div class="tab-pane active" id="dashboard-1">
            通过即插即用网络协同管理授权市场。 在安装基本优势后动态拖延B2C用户。 <br />在没有革命性的投资回报率的情况下，实现客户导向的融合。
          </div>
          <div class="tab-pane" id="schedule-1">
            在没有跨媒体价值的情况下有效释放跨媒体信息。 快速最大化实时模式的及时交付。 <br /> <br />在没有功能解决方案的情况下，大力维护点击式解决方案。
          </div>
          <div class="tab-pane" id="tasks-1">
            通过一流的利基市场完全协同资源税收关系。 专业培养具有强大创意的一对一客户服务。<br /> <br />动态创新资源平衡客户服务，为最先进的客户服务。
          </div>
        </div>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-pills nav-pills-icons"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">&gt;</span>
    <span class="c">&lt;!--
        color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger"
    --&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#dashboard-1"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>dashboard<span class="nt">&lt;/i&gt;</span>
            仪表板
        <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#schedule-1"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>schedule<span class="nt">&lt;/i&gt;</span>
            时间表
        <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#tasks-1"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>list<span class="nt">&lt;/i&gt;</span>
            任务
        <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content tab-space"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane active"</span> <span class="na">id=</span><span class="s">"dashboard-1"</span><span class="nt">&gt;</span>
      通过即插即用网络协同管理授权市场。 在安装基本优势后动态拖延B2C用户。 <span class="nt">&lt;br/&gt;</span>在没有革命性的投资回报率的情况下，实现客户导向的融合。
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"schedule-1"</span><span class="nt">&gt;</span>
      在没有跨媒体价值的情况下有效释放跨媒体信息。 快速最大化实时模式的及时交付。 <span class="nt">&lt;br&gt;</span> <span class="nt">&lt;br&gt;</span>在没有功能解决方案的情况下，大力维护点击式解决方案。
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"tasks-1"</span><span class="nt">&gt;</span>
      通过一流的利基市场完全协同资源税收关系。 专业培养具有强大创意的一对一客户服务。<span class="nt">&lt;br&gt;</span> <span class="nt">&lt;br&gt;</span>动态创新资源平衡客户服务，为最先进的客户服务。
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
      </div>
      <h3 id="丸与下拉菜单">丸与下拉菜单</h3>
      <div class="bd-example" data-example-id="">
        <ul class="nav nav-pills">
          <li class="nav-item">
            <a class="nav-link active" href="#0">Active</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#0" role="button" aria-haspopup="true" aria-expanded="false">落下</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#0">行动</a>
              <a class="dropdown-item" href="#0">另一个动作</a>
              <a class="dropdown-item" href="#0">还有别的什么</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#0">分开的链接</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#0">链接</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#0">残障人士</a>
          </li>
        </ul>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-pills"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>Active<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item dropdown"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">href=</span><span class="s">"#0"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>落下<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>行动<span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>另一个动作<span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>还有别的什么<span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span><span class="nt">&gt;&lt;/div&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>分开的链接<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>链接<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">&gt;</span>残障人士<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre>
      </div>
      <h3 id="使用数据属性">使用数据属性</h3>
      <p>只需在元素上指定<code class="highlighter-rouge">data-toggle =“tab”或</code>data-toggle =“pill”<code class="highlighter-rouge">，就可以激活制表符或制作导航，而无需编写任何JavaScript。 在</code>.nav-tabs<code class="highlighter-rouge">或</code>.nav-pills`上使用这些数据属性。</p>
      <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Nav tabs --&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">id=</span><span class="s">"myTab"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">id=</span><span class="s">"home-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#home"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"home"</span> <span class="na">aria-selected=</span><span class="s">"true"</span><span class="nt">&gt;</span>家<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">id=</span><span class="s">"profile-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#profile"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"profile"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">&gt;</span>轮廓<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">id=</span><span class="s">"messages-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#messages"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"messages"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">&gt;</span>消息<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">id=</span><span class="s">"settings-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#settings"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"settings"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">&gt;</span>设置<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>

<span class="c">&lt;!-- Tab panes --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane active"</span> <span class="na">id=</span><span class="s">"home"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"home-tab"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"profile"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"profile-tab"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"messages"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"messages-tab"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"settings"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"settings-tab"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
      </figure>
      <p>如果您想查看更多示例和属性，请查看官方 <strong><a href="http://getbootstrap.com/docs/4.0/components/navs/" target="_blank">Bootstrap Documentation</a></strong>.</p>
    </main>
  </div>
</div>